import React, {useEffect, useState} from 'react';
import {Button, Space, Table, Form, Input} from 'antd';
import EditNotes from './editNote.tsx'
import {useNavigate} from "react-router-dom";

const Notes = () => {
    const navigate = useNavigate()
    const [data, setData] = useState([])
    const columns= [
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '记录时间',
            dataIndex: 'recordingTime',
            key: 'recordingTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="primary">查看详情</Button>
                    <Button type="default" onClick={()=> openModal(record)}>修改内容</Button>
                    <Button type="primary" danger onClick={()=>deleteNotes(record.id)}>删除</Button>
                </Space>
            ),
        },
    ];


    const openModal = (record) => {
        navigate(`/app1/writeNotes`,{
            state:{
                title:record.title,
                content:record.content
            }
        })
    }
    const deleteNotes = async (id:string) => {
        const res = await fetch('/api/notes/deleteNotes/'+id, {
            method: 'DELETE',
        })
        if(res.ok){
           await getNotesData()
        }
    }
    const getNotesData = async () => {
        const res = await fetch('/api/notes/getNotes')
        const data = await res.json();
        setData(data)
    }
    useEffect(() => {
        getNotesData()
    }, []);
    return (
        <div>
            <Table columns={columns} dataSource={data} rowKey="id"/>
        </div>
    )
}

export default Notes